Estoy trabajando en un proyecto con Typescript, React y Redux (todos se ejecutan en Electron), y me encontré con un problema cuando incluyo un componente basado en una clase en otro y trato de pasar parámetros entre ellos. En términos generales, tengo la siguiente estructura para el componente contenedor:
class ContainerComponent extends React.Component<any,any> { .. render() { const { propToPass } = this.props; ... <ChildComponent propToPass={propToPass} /> ... } } .... export default connect(mapStateToProps, mapDispatchToProps)(ContainerComponent);Y el componente hijo:
interface IChildComponentProps extends React.Props<any> { propToPass: any } class ChildComponent extends React.Component<IChildComponentProps, any> { ... } .... export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent);Obviamente, solo incluyo lo básico y hay mucho más en estas dos clases, pero sigo recibiendo un error cuando intento ejecutar lo que me parece un código válido. El error exacto que estoy recibiendo:
TS2339: Property 'propToPass' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, ComponentState>> & Readonly<{ childr...'.
Cuando encontré el error por primera vez, pensé que se debía a que no estaba pasando una interfaz que definía mis accesorios, pero la creé (como puede ver arriba) y todavía no funciona. Me pregunto, ¿hay algo que me estoy perdiendo?
Cuando excluyo el accesorio ChildComponent del código en el ContainerComponent, funciona bien (aparte de que mi ChildComponent no tiene un accesorio crítico) pero con él en JSX Typescript se niega a compilarlo. Creo que podría tener algo que ver con el ajuste de conexión basado en este artículo , pero los problemas en ese artículo ocurrieron en el archivo index.tsx y fueron un problema con el proveedor, y tengo mis problemas en otra parte.
Entonces, después de leer algunas respuestas relacionadas (específicamente esta y esta y mirar la respuesta de @basarat a la pregunta, logré encontrar algo que funciona para mí. Parece (para mis ojos React relativamente nuevos) como Connect no estaba proporcionando un interfaz explícita para el componente contenedor, por lo que estaba confundido por el accesorio que estaba tratando de pasar.
Entonces, el componente contenedor se mantuvo igual, pero el componente secundario cambió un poco:
interface IChildComponentProps extends React.Props<any> { ... (other props needed by component) } interface PassedProps extends React.Props<any> { propToPass: any } class ChildComponent extends React.Component<IChildComponentProps & PassedProps, any> { ... } .... export default connect<{}, {}, PassedProps>(mapStateToProps, mapDispatchToProps) (ChildComponent);Lo anterior logró funcionar para mí. Pasar explícitamente los accesorios que el componente espera del contenedor pareció funcionar y ambos componentes se representaron correctamente.
NOTA: Sé que esta es una respuesta muy simplista y no estoy exactamente seguro de POR QUÉ funciona, por lo que si un ninja React más experimentado quiere aportar algo de conocimiento sobre esta respuesta, me complacería modificarla.
Vuelva a verificar los tipos de objetos recién agregados. Cuando el tipo de objeto no es exactamente como se esperaba, se produce dicho error.
Ex. El tipo de accesorios mencionados en el componente debe coincidir con el tipo de accesorios que se pasan a ese componente.
Haga que su componente secundario extienda React.Component con el tipo que desee o "cualquiera". ej: " extends React.Component<any> {...} "
export class ChildComponent extends React.Component<T> { render() { return ( <button className="square"> {this.props.value} </button> ); } }En el componente principal, puede pasar el valor, por ejemplo:
renderSquare(i: Number) { return <ChildComponent value={i}/>; }
Consulte https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/class_components/ para obtener más información